<template>
  <div>
    <el-dialog
      v-loading="loading"
      v-dialogDrag
      ref="dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      :before-close="cancel"
      title="代理商选择"
      width="75%"
      @opened="searchHandle"
    >
      <!-- 查询条件 -->
      <div class="searchform">
        <el-form
          ref="searchForm"
          :inline="true"
          :model="search"
          size="mini"
          label-width="100px"
          label-position="right">
          <el-form-item prop="dealer_name" label="经销商名称">
            <el-input v-model="search.dealer_name" placeholder="经销商名称" class="search-input" clearable />
          </el-form-item>
          <el-form-item prop="dealer_code" label="经销商代码">
            <el-input v-model="search.dealer_code" placeholder="经销商代码" class="search-input" clearable />
          </el-form-item>
          <br>
          <div style="text-align:center">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">代理商信息</div>
        </div>
        <!-- 用户列表 -->
        <BaseTable
          ref="table"
          highlight-current-row
          @chaneg-size="changeSizeHandle"
          @chaneg-page="changePageHandle"
          @current-change="select"
        >
          <el-table-column label="序号" type="index" />
          <el-table-column :show-overflow-tooltip="true" prop="dealer_name" label="经销商名称" min-width="150"/>
          <el-table-column prop="dealer_code" label="经销商代码" min-width="150"/>
          <el-table-column prop="province_name" label="省" min-width="150"/>
          <el-table-column prop="city_name" label="市" min-width="150"/>
          <el-table-column prop="longitude" label="经度" min-width="150"/>
          <el-table-column prop="latitude" label="维度" min-width="150"/>
          <el-table-column prop="is_pay_name" label="是否交付中心" min-width="150"/>
          <el-table-column prop="is_ty_name" label="是否体验中心" min-width="150"/>
        </BaseTable>
      </div>
      <div slot="footer" style="text-align:center" class="dialog-footer">
        <el-button type="text"><i class="el-icon-search magnifier"/></el-button>
        <el-button type="primary" @click="confirmHandle" >确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryPageInfos4dealer } from '@/api/vehicle/dealer.js'
import filtercode from '@/components/Checkbox/filtercode'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'

export default {
  name: 'AfterDealer',
  components: {
    BaseTable,
    filtercode

  },
  mixins: [formMixins],
  props: {
    dialogFormVisible: false
  },
  data() {
    return {
      loading: false,
      multipleSelection: [],
      search: {
        limit: 10,
        pageNum: 1,
        dealer_code: '',
        dealer_name: ''
      }
    }
  },

  computed: {},
  mounted() {
    // this.searchHandle();
  },
  methods: {
    searchHandle() {
      // this.search.limit = 5
      const table = this.$refs['table']
      queryPageInfos4dealer(this.search)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },

    cancel() {
      this.$emit('update:dialogFormVisible', false)
    },
    // 发票订单选择
    select(val) {
      if (val == null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },
    confirmHandle() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择数据!'
        })
      } else {
        this.$emit('getAfterDealerInfo', this.multipleSelection)
        this.$emit('update:dialogFormVisible', false)
      }
    }

  }
}
</script>

<style scoped>

.magnifier {
  float: right;
  position: absolute;
  right: 50px;
  top: 23px;
  cursor: pointer;
}
</style>
